<template>
	<view class="page" style="background-color: white;">
		<custom-navigation  title="打印商品标签">
		</custom-navigation>
	<scroll-view class="body-scroll" scroll-y="true"  >
		<view class="item flex-row-center">
			<view class="title">打印模板：</view>
			<view class="value">订单小票 </view> 
		</view>
		<view class="item flex-row-center">
			<view class="title">选择打印机：</view>
			<view class="value flex-row-center">请选择打印机 <image src="/static//arrow-bottom2.png" mode="widthFix"></image></view> 
		</view>
		<view class="item flex-row-center">
			<view class="title">订单打印联数：：</view>
			<view class="value flex-row-center"><view style="min-width: 200rpx;">1</view> <image src="/static//arrow-bottom2.png" mode="widthFix"></image></view> 
		</view>
		<view class="item flex-row-center">
			<view class="title">订单打印联数：</view>
			
		</view>
		<view class="preview flex-column-center">
			<view class="name">品名：可乐</view>
			<view class="name">规格：大瓶</view>
			<view class="name">售价：6.00元</view>
			<view class="qrcode"></view>
		</view> 

	</scroll-view>
	<view class="bottom-container flex-row-center">
		<view class="item2" @click="save(0)">取消</view>
		<view class="item1" @click="save(1)">确认打印</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				goodsList:[],
			}
		},
		onLoad() {
				this.goodsList=uni.getStorageSync("printSelectList");x
		},
		methods: {
			save(type){
				if(type==0){
					uni.navigateBack()
					return;
				} 
			}
		}
	}
</script>

<style scoped lang="scss">

	.item{
		margin-top: 60rpx;
		margin-left: 24rpx;
		.title{
			font-size: 32rpx;
			font-weight: 700;
			color: rgba(102, 102, 102, 1);
			text-align: left;
			vertical-align: top; 
		}
		
		.value{
			height: 80rpx; 
			
			line-height: 80rpx;
			border-radius: 12rpx;
			padding: 0 54rpx;
			border: 2rpx solid rgba(153, 153, 153, 1);            
			box-sizing: content-box;
			image{
				
				margin-left: 50rpx;
				width: 40rpx;
				height: 10rpx;
			}

		}
	}
	
	.preview{
		margin-top: 14rpx;
		margin-left: 24rpx;
		padding-top: 30rpx;
		width: 702rpx; 
		border: 2rpx solid rgba(153, 153, 153, 1);            
		.name{
			margin-bottom: 20rpx;
			font-size: 32rpx;
			font-weight: 700;
			color: rgba(102, 102, 102, 1); 
		}
		.qrcode{
			margin-bottom: 20rpx;
			width: 472rpx;
			height: 244rpx;
			 background: url(https://img.js.design/assets/img/636d13cdef439e62ddee10a8.png#7180a265c6bb217d4d8124e66e7240ec);
			 background-size: 100% 100%;
		}
	}
	
	.bottom-container {
		background-color: white;
		box-shadow: 0 -16rpx 16rpx 1rpx #00000008;
		height: 146rpx;
		padding: 0 24rpx;
		justify-content: space-around;
	
		.item2 {
			border-radius: 40rpx;
			line-height: 80rpx;
			text-align: center;
			border: 2rpx solid #333333FF;
			width: 192rpx;
			height: 80rpx;
			font-size: 30rpx;
			font-weight: 500;
	
		}
	
		.item1 {
			border-radius: 40rpx;
			line-height: 80rpx;
			text-align: center;
			border: 2rpx solid rgba(56, 192, 158, 1);
			background-color: rgba(56, 192, 158, 1);
			color: white;
			width: 192rpx;
			height: 80rpx;
			font-size: 30rpx;
			font-weight: 500;
		}
	
		.text {
			flex: 1;
			margin-left: 60rpx;
			font-size: 30rpx;
			font-weight: 700;
	
		}
	
		.btn {
			margin-right: 34rpx;
			width: 192rpx;
			height: 80rpx;
			border-radius: 40rpx;
			background: rgba(56, 192, 158, 1);
			font-size: 30rpx;
			font-weight: 700;
			color: white;
			text-align: center;
			line-height: 80rpx;
		}
	}
	
</style>
